<template>
  <div class="canvas">
    <div class="canvas-container" ref="editor" :style="canvasEditStyle">
      <div id="container" ref="container" class="container shadow-2xl">
        <template v-for="item in componentList" :key="item.key">
          <preview-component :item="item" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import visualApi from "@/views/visual/api/visual"
import { useTitle } from "@vueuse/core"
import { useRoute } from "vue-router"
const { getComponent, componentList } = useComponent()
import { useComponent, useScale, useVisual } from "@/hooks/userEditor"
import PreviewComponent from "@/views/visual/screen/previewComponent.vue"
import { Message } from "@arco-design/web-vue"
const title = useTitle("未命名")
const route = useRoute()
const screenId = route.query.id
const { commonStyle, visual, canvasEditStyle } = useVisual()
const editor = ref(null)
const { handleScale } = useScale(editor)
handleScale()
onMounted(async () => {
  if (!screenId) {
    visual.value.title = "未命名"
    return
  }
  // 获取屏幕详情
  const getVisual = await visualApi.read({ id: screenId })
  // 正在加载
  await Message.loading({
    content: "正在加载",
    type: "loading"
  })
  visual.value = getVisual.data
  title.value = getVisual.data.title
  const res = await visualApi.getVisualConfig({ id: screenId })
  if (!res.data.config_json) return
  const config_json = JSON.parse(res.data.config_json)
  commonStyle.value = { ...commonStyle.value, ...config_json?.detail }
  getComponent(config_json.component)
  // 关闭加载
  Message.clear()
})
</script>

<style scoped lang="less">
.canvas {
  height: calc(100% - 0px);
  position: relative;
  box-sizing: border-box;
  overflow: auto;
  background-color: var(--td-bg-color-specialcomponent);
  width: 100%;
  @apply p-3;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  // 滚动条
  &-container {
    width: 100%;
    height: 100%;

    .container {
      position: relative;
      width: 100%;
      height: 100%;
      transform-origin: 0 0;

      .component {
        position: absolute;
      }
    }
  }
}
</style>
